<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>电影 - 内容评级平台</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
  <style>
    /* 保持与首页相同的样式 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    :root {
      --primary: #4361ee;
      --secondary: #3f37c9;
      --accent: #4cc9f0;
      --dark: #1d3557;
      --darker: #0d1b2a;
      --light: #f8f9fa;
      --gray: #8d99ae;
      --success: #4caf50;
      --warning: #ff9800;
      --danger: #f44336;
      --card-bg: rgba(29, 53, 87, 0.8);
      --transition: all 0.3s ease;
    }

    body {
      background: linear-gradient(135deg, var(--darker) 0%, var(--dark) 100%);
      color: var(--light);
      min-height: 100vh;
      background-attachment: fixed;
      line-height: 1.6;
    }

    /* 页头样式 */
    header {
      background-color: rgba(13, 27, 42, 0.95);
      backdrop-filter: blur(10px);
      padding: 1rem 2rem;
      position: sticky;
      top: 0;
      z-index: 1000;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .header-container {
      max-width: 1400px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 15px;
      text-decoration: none;
    }

    .logo-icon {
      font-size: 2.5rem;
      color: var(--accent);
    }

    .logo-text {
      font-size: 1.8rem;
      font-weight: 700;
      color: var(--light);
      letter-spacing: 1px;
    }

    .logo-text span {
      color: var(--accent);
    }

    .nav-links {
      display: flex;
      gap: 2rem;
      list-style: none;
    }

    .nav-links a {
      color: var(--light);
      text-decoration: none;
      font-weight: 500;
      font-size: 1.1rem;
      padding: 0.5rem 1rem;
      border-radius: 30px;
      transition: var(--transition);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .nav-links a:hover, .nav-links a.active {
      background: rgba(67, 97, 238, 0.2);
      color: var(--accent);
    }

    .nav-links a i {
      font-size: 1.2rem;
    }

    .auth-buttons {
      display: flex;
      gap: 1rem;
    }

    .btn {
      padding: 0.7rem 1.5rem;
      border-radius: 30px;
      font-weight: 600;
      font-size: 1rem;
      cursor: pointer;
      transition: var(--transition);
      border: none;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .btn-primary {
      background: var(--primary);
      color: white;
    }

    .btn-primary:hover {
      background: var(--secondary);
      transform: translateY(-2px);
      box-shadow: 0 4px 15px rgba(67, 97, 238, 0.4);
    }

    .btn-outline {
      background: transparent;
      border: 2px solid var(--primary);
      color: var(--primary);
    }

    .btn-outline:hover {
      background: rgba(67, 97, 238, 0.1);
      transform: translateY(-2px);
    }

    /* 主内容区样式 */
    .main-content {
      max-width: 1400px;
      margin: 2rem auto;
      padding: 0 2rem;
    }

    /* 搜索区域 */
    .search-section {
      text-align: center;
      padding: 3rem 1rem;
      margin-bottom: 3rem;
    }

    .search-section h1 {
      font-size: 2.8rem;
      margin-bottom: 1rem;
      line-height: 1.2;
    }

    .search-section p {
      font-size: 1.2rem;
      color: var(--gray);
      max-width: 700px;
      margin: 0 auto 2rem;
    }

    .search-box {
      max-width: 700px;
      margin: 0 auto;
      display: flex;
      background: var(--card-bg);
      border-radius: 50px;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    }

    .search-input {
      flex: 1;
      padding: 1.2rem 1.5rem;
      border: none;
      background: transparent;
      color: var(--light);
      font-size: 1.1rem;
    }

    .search-input:focus {
      outline: none;
    }

    .search-select {
      padding: 0 1.5rem;
      background: rgba(67, 97, 238, 0.3);
      border: none;
      color: var(--light);
      border-right: 1px solid rgba(255, 255, 255, 0.1);
      appearance: none;
      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
      background-repeat: no-repeat;
      background-position: right 1rem center;
      background-size: 1em;
    }

    .search-button {
      padding: 0 2rem;
      background: var(--primary);
      color: white;
      border: none;
      font-weight: 600;
      cursor: pointer;
      transition: var(--transition);
    }

    .search-button:hover {
      background: var(--secondary);
    }

    /* 分类导航 */
    .category-section {
      margin-bottom: 3rem;
      padding: 0 1rem;
    }

    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1.5rem;
    }

    .section-title {
      font-size: 1.8rem;
      font-weight: 700;
      position: relative;
      padding-left: 1rem;
    }

    .section-title::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 4px;
      background: var(--accent);
      border-radius: 2px;
    }

    .view-all {
      color: var(--accent);
      text-decoration: none;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .categories {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 1.5rem;
    }

    .category-card {
      background: var(--card-bg);
      border-radius: 15px;
      overflow: hidden;
      transition: var(--transition);
      position: relative;
      height: 200px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      cursor: pointer;
    }

    .category-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    }

    .category-card::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(transparent 40%, rgba(0, 0, 0, 0.8) 90%);
      z-index: 1;
    }

    .category-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .category-content {
      position: relative;
      z-index: 2;
      padding: 1.5rem;
    }

    .category-title {
      font-size: 1.3rem;
      font-weight: 600;
      margin-bottom: 0.5rem;
    }

    .category-count {
      color: var(--gray);
      font-size: 0.9rem;
    }

    /* 内容列表样式 */
    .content-section {
      margin-bottom: 3rem;
      padding: 0 1rem;
    }

    .content-filters {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      margin-bottom: 1.5rem;
    }

    .filter-btn {
      padding: 0.5rem 1.5rem;
      border-radius: 30px;
      background: rgba(255, 255, 255, 0.1);
      cursor: pointer;
      transition: var(--transition);
      font-weight: 500;
    }

    .filter-btn:hover, .filter-btn.active {
      background: rgba(67, 97, 238, 0.2);
      color: var(--accent);
    }

    .content-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 2rem;
    }

    .content-card {
      background: var(--card-bg);
      border-radius: 15px;
      overflow: hidden;
      transition: var(--transition);
      position: relative;
    }

    .content-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    }

    .content-image {
      width: 100%;
      height: 350px;
      object-fit: cover;
      display: block;
    }

    .content-badge {
      position: absolute;
      top: 1rem;
      right: 1rem;
      background: var(--warning);
      color: var(--darker);
      padding: 0.3rem 0.8rem;
      border-radius: 30px;
      font-weight: 600;
      font-size: 0.9rem;
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .content-info {
      padding: 1.5rem;
    }

    .content-title {
      font-size: 1.3rem;
      font-weight: 700;
      margin-bottom: 0.5rem;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .content-meta {
      color: var(--gray);
      margin-bottom: 1rem;
      font-size: 0.9rem;
    }

    .rating {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 1rem;
    }

    .stars {
      color: var(--warning);
      display: flex;
      gap: 2px;
    }

    .rating-value {
      font-weight: 600;
    }

    .content-description {
      margin-bottom: 1.5rem;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .content-actions {
      display: flex;
      justify-content: space-between;
    }

    .action-btn {
      display: flex;
      align-items: center;
      gap: 5px;
      color: var(--light);
      background: rgba(255, 255, 255, 0.1);
      border: none;
      padding: 0.5rem 1rem;
      border-radius: 30px;
      cursor: pointer;
      transition: var(--transition);
    }

    .action-btn:hover {
      background: rgba(255, 255, 255, 0.2);
    }

    /* 分页样式 */
    .pagination {
      display: flex;
      justify-content: center;
      gap: 0.5rem;
      margin-top: 3rem;
    }

    .page-btn {
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.1);
      cursor: pointer;
      transition: var(--transition);
    }

    .page-btn:hover, .page-btn.active {
      background: rgba(67, 97, 238, 0.2);
      color: var(--accent);
    }

    /* 页脚样式 */
    footer {
      background: rgba(13, 27, 42, 0.95);
      padding: 3rem 2rem 1.5rem;
      margin-top: 3rem;
    }

    .footer-container {
      max-width: 1400px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 2rem;
    }

    .footer-col h3 {
      font-size: 1.3rem;
      margin-bottom: 1.5rem;
      position: relative;
      padding-bottom: 0.5rem;
    }

    .footer-col h3::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 50px;
      height: 2px;
      background: var(--accent);
    }

    .footer-links {
      list-style: none;
    }

    .footer-links li {
      margin-bottom: 0.8rem;
    }

    .footer-links a {
      color: var(--gray);
      text-decoration: none;
      transition: var(--transition);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .footer-links a:hover {
      color: var(--accent);
      padding-left: 5px;
    }

    .footer-links a i {
      width: 20px;
      text-align: center;
    }

    .copyright {
      text-align: center;
      padding-top: 2rem;
      margin-top: 2rem;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      color: var(--gray);
      font-size: 0.9rem;
    }

    /* 响应式设计 */
    @media (max-width: 992px) {
      .header-container {
        flex-direction: column;
        gap: 1rem;
      }

      .nav-links {
        gap: 0.5rem;
        flex-wrap: wrap;
        justify-content: center;
      }

      .auth-buttons {
        margin-top: 1rem;
      }

      .search-section h1 {
        font-size: 2.2rem;
      }

      .content-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      }
    }

    @media (max-width: 768px) {
      .search-box {
        flex-direction: column;
        border-radius: 15px;
      }

      .search-select {
        padding: 1rem 1.5rem;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      }

      .search-button {
        padding: 1rem;
      }

      .categories {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      }

      .content-filters {
        flex-wrap: wrap;
      }
    }

    @media (max-width: 480px) {
      .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
      }

      .view-all {
        align-self: flex-end;
      }

      .categories {
        grid-template-columns: 1fr 1fr;
      }

      .content-grid {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>

<body>
<!-- 页头 -->
<header>
  <div class="header-container">
    <a href="Userindex.jsp" class="logo">
      <div class="logo-icon">
        <i class="fas fa-star"></i>
      </div>
      <div class="logo-text">内容<span>评级</span>平台</div>
    </a>

    <ul class="nav-links">
      <li><a href="Userindex.jsp"><i class="fas fa-home"></i>首页</a></li>
      <li><a href="movies.html" class="active"><i class="fas fa-film"></i>电影</a></li>
      <li><a href="books.html"><i class="fas fa-book"></i>图书</a></li>
      <li><a href="music.html"><i class="fas fa-music"></i>音乐</a></li>
      <li><a href="personal-management.jsp"><i class="fas fa-user-cog"></i>个人管理</a></li>
    </ul>

    <div class="auth-buttons">
      <button class="btn btn-outline" onclick="window.location.href='Userlogin.jsp'"><i class="fas fa-sign-in-alt"></i>登录</button>
      <button class="btn btn-primary" onclick="window.location.href='Userregister.jsp'"><i class="fas fa-user-plus"></i>注册</button>
    </div>
  </div>
</header>

<!-- 主内容区 -->
<div class="main-content">
  <!-- 搜索区域 -->
  <section class="search-section">
    <h1>探索精彩电影</h1>
    <p>发现来自全球用户的真实评价，找到最适合您的电影</p>

    <div class="search-box">
      <input type="text" class="search-input" placeholder="搜索电影...">
      <select class="search-select">
        <option value="movies">全部电影</option>
        <option value="action">动作</option>
        <option value="comedy">喜剧</option>
        <option value="drama">剧情</option>
        <option value="sci-fi">科幻</option>
        <option value="horror">恐怖</option>
        <option value="animation">动画</option>
      </select>
      <button class="search-button" onclick="searchMovies()"><i class="fas fa-search"></i>搜索</button>
    </div>
  </section>

  <!-- 电影内容区 -->
  <section class="content-section">
    <div class="section-header">
      <h2 class="section-title">热门电影</h2>
      <div class="content-filters">
        <div class="filter-btn active" onclick="filterMovies('all')">全部</div>
        <div class="filter-btn" onclick="filterMovies('action')">动作</div>
        <div class="filter-btn" onclick="filterMovies('comedy')">喜剧</div>
        <div class="filter-btn" onclick="filterMovies('drama')">剧情</div>
        <div class="filter-btn" onclick="filterMovies('sci-fi')">科幻</div>
        <div class="filter-btn" onclick="filterMovies('animation')">动画</div>
      </div>
    </div>

    <div class="content-grid">
      <div class="content-card" data-category="sci-fi">
        <img src="https://picsum.photos/400/600?random=10" alt="星际穿越海报" class="content-image">
        <div class="content-badge"><i class="fas fa-fire"></i>热门</div>
        <div class="content-info">
          <h3 class="content-title">星际穿越</h3>
          <div class="content-meta">克里斯托弗·诺兰 | 2014 | 科幻/冒险</div>
          <div class="rating">
            <div class="stars">
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star-half-alt"></i>
            </div>
            <div class="rating-value">4.7</div>
          </div>
          <p class="content-description">在不远的未来，地球环境逐渐恶化，人类面临生存危机。一群探险家利用新发现的虫洞，计划超越人类太空旅行的极限...</p>
          <div class="content-actions">
            <button class="action-btn" onclick="window.location.href='movieDetail.jsp?id=1'"><i class="far fa-comment"></i>评论</button>
            <button class="action-btn" onclick="addToFavorites('星际穿越')"><i class="far fa-star"></i>收藏</button>
            <button class="action-btn" onclick="shareContent('星际穿越', 'movie')"><i class="fas fa-share"></i>分享</button>
          </div>
        </div>
      </div>

      <div class="content-card" data-category="drama">
        <img src="https://picsum.photos/400/600?random=12" alt="肖申克的救赎海报" class="content-image">
        <div class="content-badge"><i class="fas fa-film"></i>经典</div>
        <div class="content-info">
          <h3 class="content-title">肖申克的救赎</h3>
          <div class="content-meta">弗兰克·德拉邦特 | 1994 | 剧情</div>
          <div class="rating">
            <div class="stars">
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
            </div>
            <div class="rating-value">4.9</div>
          </div>
          <p class="content-description">该片改编自斯蒂芬·金《四季奇谭》中收录的同名小说，主要讲述了银行家安迪因被误判为枪杀妻子及其情人的罪名入狱后...</p>
          <div class="content-actions">
            <button class="action-btn" onclick="window.location.href='movieDetail.jsp?id=2'"><i class="far fa-comment"></i>评论</button>
            <button class="action-btn" onclick="addToFavorites('肖申克的救赎')"><i class="far fa-star"></i>收藏</button>
            <button class="action-btn" onclick="shareContent('肖申克的救赎', 'movie')"><i class="fas fa-share"></i>分享</button>
          </div>
        </div>
      </div>

      <div class="content-card" data-category="action">
        <img src="https://picsum.photos/400/600?random=13" alt="复仇者联盟4海报" class="content-image">
        <div class="content-badge"><i class="fas fa-bolt"></i>动作</div>
        <div class="content-info">
          <h3 class="content-title">复仇者联盟4：终局之战</h3>
          <div class="content-meta">安东尼·罗素 | 2019 | 动作/科幻</div>
          <div class="rating">
            <div class="stars">
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
            </div>
            <div class="rating-value">4.8</div>
          </div>
          <p class="content-description">《复仇者联盟4：终局之战》是2019年上映的美国超级英雄电影，由漫威影业出品，安东尼·罗素和乔·罗素执导...</p>
          <div class="content-actions">
            <button class="action-btn" onclick="window.location.href='movieDetail.jsp?id=3'"><i class="far fa-comment"></i>评论</button>
            <button class="action-btn" onclick="addToFavorites('复仇者联盟4：终局之战')"><i class="far fa-star"></i>收藏</button>
            <button class="action-btn" onclick="shareContent('复仇者联盟4：终局之战', 'movie')"><i class="fas fa-share"></i>分享</button>
          </div>
        </div>
      </div>

      <div class="content-card" data-category="comedy">
        <img src="https://picsum.photos/400/600?random=14" alt="三傻大闹宝莱坞海报" class="content-image">
        <div class="content-info">
          <h3 class="content-title">三傻大闹宝莱坞</h3>
          <div class="content-meta">拉库马·希拉尼 | 2009 | 喜剧/剧情</div>
          <div class="rating">
            <div class="stars">
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star-half-alt"></i>
            </div>
            <div class="rating-value">4.8</div>
          </div>
          <p class="content-description">影片讲述了三位主人公法罕、拉加与兰彻间的大学故事。兰彻是一个与众不同的大学生，他公然顶撞校长、质疑教学方法...</p>
          <div class="content-actions">
            <button class="action-btn" onclick="window.location.href='movieDetail.jsp?id=4'"><i class="far fa-comment"></i>评论</button>
            <button class="action-btn" onclick="addToFavorites('三傻大闹宝莱坞')"><i class="far fa-star"></i>收藏</button>
            <button class="action-btn" onclick="shareContent('三傻大闹宝莱坞', 'movie')"><i class="fas fa-share"></i>分享</button>
          </div>
        </div>
      </div>

      <div class="content-card" data-category="animation">
        <img src="https://picsum.photos/400/600?random=15" alt="千与千寻海报" class="content-image">
        <div class="content-badge"><i class="fas fa-film"></i>动画</div>
        <div class="content-info">
          <h3 class="content-title">千与千寻</h3>
          <div class="content-meta">宫崎骏 | 2001 | 动画/奇幻</div>
          <div class="rating">
            <div class="stars">
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
            </div>
            <div class="rating-value">4.9</div>
          </div>
          <p class="content-description">影片讲述了少女千寻意外来到神灵异世界后，为了救爸爸妈妈，经历了很多冒险的故事。该片荣获2003年奥斯卡金像奖最佳长篇动画...</p>
          <div class="content-actions">
            <button class="action-btn" onclick="window.location.href='movieDetail.jsp?id=5'"><i class="far fa-comment"></i>评论</button>
            <button class="action-btn" onclick="addToFavorites('千与千寻')"><i class="far fa-star"></i>收藏</button>
            <button class="action-btn" onclick="shareContent('千与千寻', 'movie')"><i class="fas fa-share"></i>分享</button>
          </div>
        </div>
      </div>

      <div class="content-card" data-category="drama">
        <img src="https://picsum.photos/400/600?random=16" alt="活着海报" class="content-image">
        <div class="content-info">
          <h3 class="content-title">活着</h3>
          <div class="content-meta">张艺谋 | 1994 | 剧情/历史</div>
          <div class="rating">
            <div class="stars">
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star-half-alt"></i>
            </div>
            <div class="rating-value">4.8</div>
          </div>
          <p class="content-description">影片改编自余华的同名小说，通过一个普通人福贵的一生，反映了中国近现代历史的沧桑巨变。福贵经历了从富家子弟到贫穷农民的转变...</p>
          <div class="content-actions">
            <button class="action-btn" onclick="window.location.href='movieDetail.jsp?id=6'"><i class="far fa-comment"></i>评论</button>
            <button class="action-btn" onclick="addToFavorites('活着')"><i class="far fa-star"></i>收藏</button>
            <button class="action-btn" onclick="shareContent('活着', 'movie')"><i class="fas fa-share"></i>分享</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 分页 -->
    <div class="pagination">
      <div class="page-btn"><i class="fas fa-angle-left"></i></div>
      <div class="page-btn active">1</div>
      <div class="page-btn">2</div>
      <div class="page-btn">3</div>
      <div class="page-btn">4</div>
      <div class="page-btn">5</div>
      <div class="page-btn"><i class="fas fa-angle-right"></i></div>
    </div>
  </section>
</div>

<!-- 页脚 -->
<footer>
  <div class="footer-container">
    <div class="footer-col">
      <h3>关于我们</h3>
      <ul class="footer-links">
        <li><a ><i class="fas fa-info-circle"></i>平台简介</a></li>
        <li><a ><i class="fas fa-users"></i>团队介绍</a></li>
        <li><a ><i class="fas fa-newspaper"></i>新闻动态</a></li>
        <li><a ><i class="fas fa-briefcase"></i>加入我们</a></li>
      </ul>
    </div>

    <div class="footer-col">
      <h3>关于我们</h3>
      <ul class="footer-links">
        <li><a ><i class="fas fa-info-circle"></i>平台简介</a></li>
        <li><a ><i class="fas fa-users"></i>团队介绍</a></li>
        <li><a ><i class="fas fa-newspaper"></i>新闻动态</a></li>
        <li><a ><i class="fas fa-briefcase"></i>加入我们</a></li>
      </ul>
    </div>

    <div class="footer-col">
      <h3>帮助中心</h3>
      <ul class="footer-links">
        <li><a ><i class="fas fa-question-circle"></i>常见问题</a></li>
        <li><a ><i class="fas fa-envelope"></i>联系我们</a></li>
        <li><a ><i class="fas fa-comment"></i>意见反馈</a></li>
        <li><a ><i class="fas fa-shield-alt"></i>隐私政策</a></li>
      </ul>
    </div>

    <div class="footer-col">
      <h3>内容分类</h3>
      <ul class="footer-links">
        <li><a href="movies.html"><i class="fas fa-film"></i>电影</a></li>
        <li><a href="books.html"><i class="fas fa-book"></i>图书</a></li>
        <li><a href="music.html"><i class="fas fa-music"></i>音乐</a></li>
        <li><a href="tv-shows.html"><i class="fas fa-tv"></i>剧集</a></li>
      </ul>
    </div>

    <div class="footer-col">
      <h3>关注我们</h3>
      <div class="social-links">
        <a href="#" class="social-icon"><i class="fab fa-weibo"></i></a>
        <a href="#" class="social-icon"><i class="fab fa-wechat"></i></a>
        <a href="#" class="social-icon"><i class="fab fa-twitter"></i></a>
        <a href="#" class="social-icon"><i class="fab fa-instagram"></i></a>
      </div>
      <p class="subscribe-text">订阅我们的新闻简报</p>
      <div class="subscribe-box">
        <input type="email" placeholder="输入您的邮箱">
        <button class="btn btn-primary">订阅</button>
      </div>
    </div>
  </div>

  <div class="copyright">
    <p>© 2025 内容评级平台 版权所有</p>
  </div>
</footer>

<script>
  // 搜索电影函数
  function searchMovies() {
    const searchInput = document.querySelector('.search-input').value;
    const category = document.querySelector('.search-select').value;
    console.log(`搜索: ${searchInput}, 分类: ${category}`);
    // 这里可以添加实际的搜索逻辑
  }

  // 过滤电影函数
  function filterMovies(category) {
    const filterBtns = document.querySelectorAll('.filter-btn');
    filterBtns.forEach(btn => {
      btn.classList.remove('active');
    });
    document.querySelector(`.filter-btn[onclick="filterMovies('${category}')"]`).classList.add('active');

    const cards = document.querySelectorAll('.content-card');
    cards.forEach(card => {
      if (category === 'all' || card.dataset.category === category) {
        card.style.display = 'block';
      } else {
        card.style.display = 'none';
      }
    });
  }

  // 添加到收藏夹
  function addToFavorites(title) {
    alert(`${title} 已添加到收藏夹!`);
    // 实际应用中，这里可以添加到用户的收藏列表
  }

  // 分享内容
  function shareContent(title, type) {
    alert(`分享 ${title} (${type}) 的链接已复制到剪贴板!`);
    // 实际应用中，这里可以实现复制链接到剪贴板的功能
  }
</script>
</body>
</html>